import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Image, ScrollView, Dimensions, Platform, TouchableOpacity } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
import { useNavigation } from '@react-navigation/native';
import AsyncStorage from '@react-native-async-storage/async-storage';


const MAX_WIDTH = 480;
const screenWidth = Dimensions.get('window').width;
const contentWidth = screenWidth > MAX_WIDTH ? MAX_WIDTH : screenWidth;

const AVATAR_SIZE = wp('16%') > 80 ? 80 : wp('16%');
const GRID_ICON_SIZE = wp('8%') > 40 ? 40 : wp('8%');
const GRID_LABEL_SIZE = wp('3.5%') > 16 ? 16 : wp('3.5%');
const MONEY_LABEL_SIZE = wp('3.2%') > 15 ? 15 : wp('3.2%');
const MONEY_VALUE_SIZE = wp('4.5%') > 20 ? 20 : wp('4.5%');

const moneyList = [
  { label: '可用余额', value: '1457.', icon: 'cash' },
  { label: '保证金', value: '1000.', icon: 'wallet' },
  { label: '冻结金额', value: '0.0', icon: 'lock-closed' },
];

const buyerList = [
  { label: '待付款', icon: 'card' },
  { label: '待发货', icon: 'cube' },
  { label: '待收货', icon: 'checkmark-done' },
  { label: '全部订单', icon: 'document-text' },
  { label: '收藏', icon: 'star' },
  { label: '历史浏览', icon: 'paw' },
];

const sellerList = [
  { label: '待审核', icon: 'clipboard' },
  { label: '出售中', icon: 'pricetag' },
  { label: '已出售', icon: 'cash' },
  { label: '全部商品', icon: 'grid' },
  { label: '待发货', icon: 'cube' },
  { label: '待收货', icon: 'checkmark-done' },
  { label: '交易成功', icon: 'checkmark-circle' },
  { label: '全部订单', icon: 'document-text' },
  { label: '实名认证', icon: 'shield-checkmark' },
  { label: '店铺信息', icon: 'storefront' },
];

const toolList = [
  { label: '官方客服', icon: 'chatbubble-ellipses' },
  { label: '帮助中心', icon: 'help-circle' },
  { label: '设置', icon: 'settings' },
];

const My = () => {
  const navigation = useNavigation();
  const [userData, setUserData] = useState({ name: '', money: 0 });

  useEffect(() => {
    const loadUserData = async () => {
      try {
        const name = await AsyncStorage.getItem('name');
        const money = await AsyncStorage.getItem('money');
        console.log(name,money)
        setUserData({ name: name || '', money: money ? parseInt(money) : 0 });
      } catch (error) {
        console.error('获取用户信息失败:', error);
      }
    };
    loadUserData();
  }, []);

  return (
    <ScrollView style={{ backgroundColor: '#fff' }}>
      <View style={[styles.content, { width: contentWidth }]}>
        {/* 个人信息区 */}
        <View style={styles.header}>
          <Image source={{ uri: 'https://randomuser.me/api/portraits/men/1.jpg' }} style={[styles.avatar, { width: AVATAR_SIZE, height: AVATAR_SIZE, borderRadius: AVATAR_SIZE / 2 }]} />
          <View style={{ marginLeft: 12 }}>
            <Text style={styles.name} onPress={() => navigation.navigate('Daohang')}>{userData.name}</Text>
            <View style={styles.tag}><Text style={styles.tagText}>已实名</Text></View>
          </View>
        </View>
        {/* 金额区 */}
        <View style={styles.moneyRow}>
          <TouchableOpacity style={styles.moneyItem} onPress={() => navigation.navigate('Money',{money:userData.money})}>
            <Text style={[styles.moneyValue, { fontSize: MONEY_VALUE_SIZE }]}>{userData.money}</Text>
            <Text style={[styles.moneyLabel, { fontSize: MONEY_LABEL_SIZE }]}>{moneyList[0].label}</Text>
          </TouchableOpacity>
          {moneyList.slice(1).map((item, idx) => (
            <View style={styles.moneyItem} key={item.label}>
              <Text style={[styles.moneyValue, { fontSize: MONEY_VALUE_SIZE }]}>{item.value}</Text>
              <Text style={[styles.moneyLabel, { fontSize: MONEY_LABEL_SIZE }]}>{item.label}</Text>
            </View>
          ))}
        </View>
        {/* 买家区 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>我是买家</Text>
          <View style={styles.gridRow}>
            {buyerList.map((item, idx) => (
              <View style={styles.gridItem} key={item.label}>
                <Ionicons name={item.icon} size={GRID_ICON_SIZE} color="#d0021b" />
                <Text style={[styles.gridLabel, { fontSize: GRID_LABEL_SIZE }]}>{item.label}</Text>
              </View>
            ))}
          </View>
        </View>
        {/* 卖家区 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>我是卖家</Text>
          <View style={styles.gridRowSeller}>
            {sellerList.map((item, idx) => (
              <View style={styles.gridItemSeller} key={item.label}>
                <Ionicons name={item.icon} size={GRID_ICON_SIZE} color="#d0021b" />
                <Text style={[styles.gridLabel, { fontSize: GRID_LABEL_SIZE }]}>{item.label}</Text>
              </View>
            ))}
          </View>
        </View>
        {/* 其它工具区 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>其它工具</Text>
          <View style={styles.gridRow}>
            {toolList.map((item, idx) => (
              <TouchableOpacity
                style={styles.gridItem}
                key={item.label}
                onPress={() => {
                  if (item.label === '官方客服') {
                    navigation.navigate('CustomerService');
                  }
                }}
              >
                <Ionicons name={item.icon} size={GRID_ICON_SIZE} color="#d0021b" />
                <Text style={[styles.gridLabel, { fontSize: GRID_LABEL_SIZE }]}>{item.label}</Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  content: {
    alignSelf: 'center',
    backgroundColor: '#fff',
    minHeight: hp('100%'),
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#d0021b',
    paddingLeft: 20,
    paddingTop: Platform.OS === 'web' ? 30 : hp('4%'),
    paddingBottom: 20,
    height: Platform.OS === 'web' ? 110 : hp('14%'),
  },
  avatar: {
    borderWidth: 2,
    borderColor: '#fff',
  },
  name: {
    color: '#fff',
    fontSize: wp('4.5%') > 20 ? 20 : wp('4.5%'),
    fontWeight: 'bold',
  },
  tag: {
    backgroundColor: '#fff',
    borderRadius: 10,
    paddingHorizontal: 8,
    paddingVertical: 2,
    marginTop: 6,
    alignSelf: 'flex-start',
  },
  tagText: {
    color: '#d0021b',
    fontSize: wp('3.2%') > 14 ? 14 : wp('3.2%'),
  },
  moneyRow: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: '#fff',
    paddingVertical: 16,
    borderBottomWidth: 1,
    borderColor: '#eee',
  },
  moneyItem: {
    alignItems: 'center',
    width: '33.33%',
  },
  moneyValue: {
    color: '#d0021b',
    fontWeight: 'bold',
  },
  moneyLabel: {
    color: '#888',
    marginTop: 4,
  },
  section: {
    marginTop: 16,
    backgroundColor: '#fff',
    paddingBottom: 8,
    borderBottomWidth: 1,
    borderColor: '#eee',
  },
  sectionTitle: {
    fontSize: wp('3.5%') > 15 ? 15 : wp('3.5%'),
    color: '#888',
    marginLeft: 16,
    marginVertical: 8,
  },
  gridRow: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'flex-start',
    paddingHorizontal: 10,
  },
  gridItem: {
    width: '25%',
    alignItems: 'center',
    marginVertical: 10,
    minWidth: 70,
    maxWidth: 120,
  },
  gridLabel: {
    marginTop: 6,
    color: '#333',
  },
  gridRowSeller: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'flex-start',
    paddingHorizontal: 6,
  },
  gridItemSeller: {
    width: '25%',
    alignItems: 'center',
    marginVertical: 10,
    minWidth: 70,
    maxWidth: 100,
  },
});

export default My;